<#import "../../layout/single.ftl" as layout>
<@layout.single title="流程历史">
<div class="container-fluid">
    <div class="wrapper wrapper-content">
        <div class="col-sm-4 animated fadeInRight">
            <div class="row">
                <div class="ibox float-e-margins">
                    <div class="" id="ibox-content">
                        <div id="vertical-timeline" class="vertical-container light-timeline">
                            <#list historys as history>
                                <div class="vertical-timeline-block">
                                    <#if history.status=="FINISHED">
                                        <div class="vertical-timeline-icon navy-bg">
                                            <i class="glyphicon glyphicon-check"></i>
                                        </div>
                                    <#elseif history.status=="UNFINISHED">
                                        <div class="vertical-timeline-icon yellow-bg">
                                            <i class="glyphicon glyphicon-repeat"></i>
                                        </div>
                                    <#elseif history.status=="SUSPENDED">
                                        <div class="vertical-timeline-icon yellow-bg">
                                            <i class="glyphicon glyphicon-repeat"></i>
                                        </div>
                                    </#if>
                                    <div class="vertical-timeline-content">
                                        <#if history.activityType!="endEvent">
                                            <h2>${history.taskName}</h2>
                                            <p>
                                                <#if history.status=="FINISHED">
                                                    <#if  history.activityType!="startEvent">
                                                        ${history.comment!"<span class='text-muted'>没有办理意见</span>"}
                                                    </#if>
                                                <#elseif history.status=="UNFINISHED">
                                                    <span class="label label-warning">未办理</span>
                                                <#elseif history.status=="SUSPENDED">
                                                    <span class="label label-default">已挂起</span>
                                                </#if>
                                            </p>
                                            <span>
                                                <i class="glyphicon glyphicon-user"></i>
                                                ${(history.assignee.userName)!"未指定"}
                                            </span>&nbsp;&nbsp;
                                            <span>
                                                <i class="glyphicon glyphicon-time"></i>
                                                ${history.startTimeStr}
                                            </span>
                                            <#if history.delegated?? && history.delegated>
                                                <blockquote>
                                                    <p class="text-muted">
                                                        由 <strong>${history.owner.userName}</strong> 委托办理
                                                    </p>
                                                </blockquote>
                                            </#if>
                                        <#else >
                                            <span class="label label-error">办理结束</span>
                                        </#if>

                                    </div>
                                </div>
                            </#list>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8 animated fadeInLeft embed-responsive embed-responsive-16by9" id="graphicsIframeArea">
            <iframe src="${request.contextPath}/flow/api/history/graphics/${instanceId}" class="embed-responsive-item"
                    id="graphicsIframe" onload="$(this).contents().find('img').width('95%')"></iframe>
        </div>
    </div>
</div>
<script>
</script>
</@layout.single>